<template>
    <el-avatar :src="userAvatar" :size="imageSize" @click="click" />
</template>

<script setup>
import defaultAvatar from "@/assets/image/default_avatar.png"
import { useUserStore, storeToRefs } from "@/pinia"
import { getUserAvatarImage } from "@/utils/tools"

const props = defineProps({
    size: { type: [String, Number], default: 40 },
})

const imageSize = computed(() => {
    return parseInt(props.size.toString().replace("px", ""))
})

const userStore = useUserStore()

const { getUserInfo, islogin } = storeToRefs(userStore)
const emits = defineEmits(["click"])
const click = () => {
    emits("click")
}

const userAvatar = computed(() => {
    return islogin.value ? getUserAvatarImage(getUserInfo.value.avatar) || defaultAvatar : defaultAvatar
})
</script>